<%--
  Created by IntelliJ IDEA.
  User: MSI
  Date: 2022/5/6
  Time: 9:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>ajax登录</h1>
<label>用户名:</label>
<input type="text" id="userName">
<br>
<label>密码:</label>
<input type="password" id="userPwd">
<br>
<span style="color: red" id="info"></span>
<button type="button" onclick="login()">get登录</button>
<button type="button" onclick="loginPost()">post登录</button>
<button type="button" onclick="loginPostTwo()">post登录2</button>


</body>
<script>
    function login(){
        //获取用户名
        var name =$("#userName").val();
        //获取密码
        var pwd =$("#userPwd").val();
        //定义ajax请求(jquery)
        $.ajax({
            url:"/loginAjax/get",//请求的服务器地址
            type:"get",//请求方式
            data:{"userName":name,"userPwd":pwd}, //发送给服务端的数据格式
            dataType:"json",//服务端返回给前端的数据类型，默认是json
            success:function (data){//如果连接服务端成功，执行的回调函数,data 就是返回的数据
                console.log(data);
                //显示提示信息
                $("#info").text(data.info);
                if (data.success){
                    //回到 index页面
                    window.location.href="/test/index";
                }
            },
            error:function (data){//如果连接服务端失败，执行的回调函数
                console.log("服务器连接失败");
            }
        })
    }
    function loginPost(){
        //获取用户名
        var name =$("#userName").val();
        //获取密码
        var pwd =$("#userPwd").val();
        //定义ajax请求(jquery)
        $.ajax({
            url:"/loginAjax/post",//请求的服务器地址
            type:"post",//请求方式
            data:{"userName":name,"userPwd":pwd}, //发送给服务端的数据格式
            contentType:"application/x-www-form-urlencoded",//定义前端向服务端发送的数据类型
            dataType:"json",//服务端返回给前端的数据类型，默认是json
            success:function (data){//如果连接服务端成功，执行的回调函数,data 就是返回的数据
                console.log(data);
                //显示提示信息
                $("#info").text(data.info);
                if (data.success){
                    //回到 index页面
                    window.location.href="/test/index";
                }
            },
            error:function (data){//如果连接服务端失败，执行的回调函数
                console.log("服务器连接失败");
            }
        })
    }function loginPostTwo(){
        //获取用户名
        var name =$("#userName").val();
        //获取密码
        var pwd =$("#userPwd").val();
        //定义ajax请求(jquery)
        $.ajax({
            url:"/login/loginAjaxTwo",//请求的服务器地址
            type:"post",//请求方式
            data:JSON.stringify({"userName":name,"userPwd":pwd}), //发送给服务端的数据格式
            contentType:"application/json",//定义前端向服务端发送的数据类型
            dataType:"json",//服务端返回给前端的数据类型，默认是json
            success:function (data){//如果连接服务端成功，执行的回调函数,data 就是返回的数据
                console.log(data);
                //显示提示信息
                $("#info").text(data.info);
                if (data.success){
                    //回到 index页面
                    window.location.href="/test/index";
                }
            },
            error:function (data){//如果连接服务端失败，执行的回调函数
                console.log("服务器连接失败");
            }
        })
    }
</script>
</html>
